<template>
	<div>
		<van-button type="primary" @click="onSubmit">主要按钮</van-button>
		<AppIcon name="logo" />
	</div>
	<div class="pinia">
		<div class="name">用户名:{{ userStore.name }}</div>
		<div class="length">长度:{{ userStore.nameLength }}</div>
		<van-button type="primary" @click="updateName(true)">action修改store中的name</van-button>
		<van-button @click="updateName(false)">patch修改store中的name</van-button>
	</div>
</template>
<script setup lang="ts">
	import { useUserStore } from '@/store';
	import { useLoading } from '@/hooks/useLoading';
	const { startLoading, stopLoading } = useLoading();
	const onSubmit = async () => {
		startLoading('加载中...');
		setTimeout(() => {
			stopLoading();
		}, 3000);
		// do something
	};

	const userStore = useUserStore();

	const updateName = (isAction: boolean) => {
		if (isAction) {
			// action 修改 store 中的数据
			userStore.updateName('userStore.updateName方式');
		} else {
			// 未定义 action 时可以用 $patch 方法直接更改状态属性
			// $patch 修改 store 中的数据
			userStore.$patch({
				name: 'userStore.$patch方式',
			});
		}
	};
</script>
